<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="../css/reset.css">
	<link rel="stylesheet" type="text/css" href="../css/date_input.css">
	<link rel="stylesheet" type="text/css" href="../css/common.css">
	<script src="../js/jquery-1.12.3.js"></script>
	<script src="../js/jquery.date_input.pack.js"></script>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body>
	<header>
		<a class="navbar-header" href="">
			<img src="../images/ph.png" alt="">
			<div>
				<span>Nifty</span>
			</div>
		</a>
	</header>
	<div class="boxed">
		<div class="menu-wrap">
			<ul>
				<li class="list-header">Navigation</li>
				<li class="active-link">
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
					</a>
				<li/>
				<li class="list-divider"></li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
						<i class="down-list"></i>
					</a>
					<ul class="op-list">
						<li>
							<a href="#">Dashboard</a>
						</li>
						<li>
							<a href="#">Dashboard</a>
						</li>
						<li>
							<a href="#">Dashboard</a>
						</li>
						<li>
							<a href="#">Dashboard</a>
						</li>
					</ul>
				</li>
				<li class="list-header">Components</li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
						<i class="down-list"></i>
					</a>
					<ul class="op-list">
						<li>
							<a href="#">Dashboard</a>
						</li>
						<li>
							<a href="#">Dashboard</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		<!-- 内容区域 -->
		<div class="content-container">
			<div class="mask">
				<div class="mask-box">
					<div class="mask-head">
						<h4>指标设置</h4>
						<span></span>
					</div>
					<div class="mask-con">
						<div class="mask-marc">
							<ul class="purch-b clearfix">
								<li>
									<span>购买人:</span>
									<div class="m-purch">
										<input class="p-radio" type="radio" name="purchaser" checked="checked">
										<div class="ra-btn ra-checked">
											<span></span>
										</div>
										<b>学员购买</b>
										<div class="n-purch">
											<input class="p-radio" type="radio" name="purchaser">
											<div class="ra-btn dis-s">
												<span></span>
											</div>
											<span>非意向学员购买</span>
										</div>
										<div class="c-nost">
											<input class="p-radio" type="radio" name="purchaser">
											<div class="ra-btn no-st">
												<span></span>
											</div>
											<span>非学员购买</span>
										</div>	
									</div>
								</li>
								<li id="cho-stud">
									<span>选择学员:</span>
									<div class="single-box intention">
										<div class="single-downbtn">
											<span>全部部门</span>
											<em></em>
										</div>
										<div class="single-dropdown">
											<em></em>
											<input type="text" placeholder="搜索">
											<ul>
												<li>学员1</li>
												<li>学员2</li>
												<li>学员3</li>
												<li>学员4</li>
												<li>学员5</li>
											</ul>
										</div>
									</div>
									<div class="single-box n-intention">
										<div class="single-downbtn">
											<span>全部部门</span>
											<em></em>
										</div>
										<div class="single-dropdown">
											<em></em>
											<input type="text" placeholder="搜索">
											<ul>
												<li>学员1</li>
												<li>学员2</li>
												<li>学员3</li>
												<li>学员4</li>
												<li>学员5</li>
											</ul>
										</div>
									</div>
								</li>
								<li>
									<span>商品数量:</span>
									<input class="purch-num" type="text" onkeyup="intNum(this)">
								</li>	
							</ul>
							<ul class="clearfix">
								<li>
									<span>商品名:</span>
									<em>这是商品名字</em>
								</li>
								<li>
									<span>单价名:</span>
									<em>300.00元</em>
								</li>
								<li>
									<span>合计:</span>
									<em>300.00元</em>
								</li>	
							</ul>
						</div>
					</div>
					<div class="ad-stud">
						<span>还不是学员？</span>
						<a href="">添加学员</a>
					</div>
					<div class="mask-confirm">确认购买</div>
				</div>
			</div>
			<div class="common-tit">
				<h2>商品详情</h2>
				<span>商品管理 > 商品详情</span>
				<div class="cours-gbtn">
					<a id="sale" href="javacript:;">售卖</a>
				</div>
			</div>
			<div class="course-box">
				<h3>
					<span>基本信息</span>
				</h3>
				<div class="commo-dec clearfix">
					<div class="camera"></div>
					<ul>
						<li>
							<span>商品分类:</span>
							<em id="comsh">课程商品123</em>
						</li>
						<li>
							<span>商品类型:</span>
							<em>商品类型</em>
						</li>
						<li>
							<span>商品名称:</span>
							<em>商品名称</em>
						</li>
						<li>
							<span>违规规格:</span>
							<em>10课时</em>
						</li>
						<li>
							<span>商品价格:</span>
							<em>1388元</em>
						</li>
						<li>
							<span>商品库存:</span>
							<em>2000</em>
						</li>
						<li>
							<span>有效期:</span>
							<em>12月</em>
						</li>
					</ul>
				</div>
				<h3>
					<span>相关信息</span>
				</h3>
				<div class="course-b clearfix">
					<div class="relevant clearfix">
						<div>
							<span>销量:</span>
							<em>20000</em>
						</div>
						<div>
							<span>状态:</span>
							<em>-</em>
						</div>
					</div>
				</div>
				<h3>
					<span>折扣优惠</span>
				</h3>
				<div class="course-b clearfix">
					<div class="co-discount">
						<div>
							<span>数量:</span>
							<span>超过</span>
							<em>20</em>
							<b>件</b>
							<strong>折扣为:</strong>
							<em>90</em>
							<b>%</b>
						</div>
						<div>
							<span>时间:</span>
							<em>2016年12月2日</em>
							<i>-</i>
							<em>2016年12月2日</em>
							<strong>折扣为:</strong>
							<em>90</em>
							<b>%</b>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="../js/common.js"></script>
	<script> 
		if ($("#comsh").text() == "课程商品") {
			$(".c-nost").css({
				"display" : "none"
			})
		};
		

		$(".mask .ra-btn").on("click", function() {
			$(".mask .ra-btn").removeClass("ra-checked");
			$(this).addClass("ra-checked");
			$(this).prev("input").prop("checked", true);
			if ($(this).hasClass("no-st")) {
				$("#cho-stud").css({
					"display" : "none"
				});
			} else {
				$("#cho-stud").css({
					"display" : "block"
				});
				if ($(this).hasClass("dis-s")) {
					$("#cho-stud .intention").css({
						"display" : "none"
					});
					$("#cho-stud .n-intention").css({
						"display" : "block"
					});
				} else {
					$("#cho-stud .intention").css({
						"display" : "block"
					});
					$("#cho-stud .n-intention").css({
						"display" : "none"
					});
				}
			}
		});
		$("#sale").on("click", function() {
			$(".mask").css({
				"display" : "block"
			});
			$(".mask-box").css({
				"margin-top" : -($(".mask-box").height() + parseInt($(".mask-box").css("padding-bottom")))/2
			})
		})
		// 弹窗(有重复则删除)
		$(".mask-head span").on("click", function() {
			$(this).parent().parent().find("input").val("");
			$(".mask").css({
				"display" : "none"
			})
		})
		$(".mask-confirm").on("click", function() {
			$(this).parent().parent().find("input").val("");
			$(".mask").css({
				"display" : "none"
			})
		})
		/* 单选下拉列表 */
		$(".single-downbtn").on("click", function() {
			if ($(this).next(".single-dropdown").hasClass("menuopen")) {
				$(this).next(".single-dropdown").removeClass("menuopen");
			} else {
				$(this).next(".single-dropdown").addClass("menuopen");
				$(this).parent().hover(function() {
					
				}, function() {
					$(this).children(".single-dropdown").removeClass("menuopen");
				});
				$(".menuopen li").on("click", function() {
					$(this).parent().parent().removeClass("menuopen");
					$(this).parent().parent().parent().find("span").text($(this).text());
					$(this).parent().parent().find("input").val("");
					$(".single-dropdown li").removeClass("mul-hide");
				});
				$(this).next("div").find("input").on('input',function(){ 
					console.log($(this));
					if ($(this).val() != "") {
				  		console.log($(this).val());
				  		$(".single-dropdown li").addClass("mul-hide");
				  		console.log($($(".single-dropdown li:contains(" + $(this).val() + ")")).removeClass("mul-hide"));
					} else {
						$(".single-dropdown li").removeClass("mul-hide");
					}
				})
			}
		}); 
	</script>
</body>
</html>